<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS运动</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrapAll {
            padding: 10px;
        }

        .buttons button+button {
            margin-left: 10px;
        }

        .wrap {
            width: 1100px;
            height: 600px;
            border: 1px solid #333;
            margin-top: 10px;
            position: relative;
        }

        .sub {
            width: 100px;
            height: 100px;
            background-color: #6ff;
            position: absolute;
            /* left: 100px; */
        }
    </style>
</head>

<body>
    <div class="wrapAll">
        <div class="buttons">
            <!-- <button class="up">上</button> -->
            <button class="right">左</button>
            <button class="left">右</button>
            <button class="down">循环</button>
            <button class="pause">暂停</button>

        </div>
        <div class="wrap">
            <div class="sub"></div>
        </div>
    </div>

</body>
<script>
    var up = document.getElementsByClassName("up")[0];
    var down = document.getElementsByClassName("down")[0];
    var left = document.getElementsByClassName("left")[0];
    var right = document.getElementsByClassName("right")[0];
    var pause = document.getElementsByClassName("pause")[0];
    var sub = document.getElementsByClassName("sub")[0];

    var timer = null;
    var cur = sub.offsetLeft;
    var speed = 2;

    // 左运动
    right.onclick = function () {
        animate(sub, "left", 0, "slow");
    }

    // 右运动
    left.onclick = function () {
        animate(sub, "left", 1000, "fast");
    }

    // 暂停
    pause.onclick = function () {
        clearInterval(timer);
    }

    // 循环
    down.onclick = function () {
        loop();
    }

    //循环运动
    function loop() {
        animate(sub, "left", 1000, "fast", function () {
            animate(sub, "top", 500, "fast", function () {
                animate(sub, "left", 0, "fast", function () {
                    animate(sub, "top", 0, "fast", function () {
                        loop();
                    });
                });
            });
        });
    }




    //Js运动 传入元素，css样式，终点
    // aniType 运动方式  (normal fast slow)
    // fn      回调函数,在运动结束时执行
    function animate(ele, attr, end, aniType = "normal", fn) {
        //传统的获取非行内样式
        //cur 1. 记录盒子最开始的初始值  2. 记录每次运动时的当前位置
        var cur = parseFloat(getStyle(ele, attr));
        end = parseFloat(end);
        var speed = 0; //初始速度
        clearInterval(timer);
        timer = setInterval(function () {
            if (aniType == "normal") {
                // 匀速运动
                speed = end > cur ? 20 : -20;
            } else if (aniType == "fast") {
                // 加速运动
                speed = end > cur ? speed + 5 : speed - 5;
            } else if (aniType == "slow") {
                // 减速运动
                speed = (end - cur) / 10;
                speed = end > cur ? Math.ceil(speed) : Math.floor(speed);
            }
            cur += speed;
            ele.style[attr] = cur + "px";
            console.log(cur, end, speed);
            if (Math.abs(end - cur) <= Math.abs(speed)) {
                clearInterval(timer);
                ele.style[attr] = end + "px";

                if (fn) { //如果传入回调函数 => 在结束运动后执行
                    fn()
                }
            }
        }, 10);
    }

    //33.js获取非行内样式的兼容ie方法
    function getStyle(ele, attr) {
        if (window.getComputedStyle) {  //取值 判断方法是否存在   存在:常规浏览器
            return window.getComputedStyle(ele)[attr];
        } else {  //不存在 => IE
            return ele.currentStyle[attr];
        }
    }
</script>

</html>